<template>
  <div class="department-container">
    <div class="app-container">
      <div class="handerBox">人事系统报表<span class="rod">|</span><span class="time">根据部门/时间统计</span></div>
    </div>

    <div class="date">
      至
      <el-time-picker
        v-model="value1"
        is-range
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      />
      <span class="boss">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
    </div>

    <div id="Tdd">
      <div id="main" class="earches" style="width: 600px;height:400px;" />
    </div>

    <div class="tabless">
      <el-table
        :align="center"
        :header-cell-style="{background:'#f2f2f2',color:'#606266'}"
        :data="tableData"
        border
        style="width: 100%"
      >

        <el-table-column
          style="text-align: center;"
          prop="order"
          label="序号"
          width="80"
        />

        <el-table-column
          prop="dates"
          label="开始时间"
          width="180"
        />

        <el-table-column
          prop="stopTime"
          label="结束时间"
          width="180"
        />

        <el-table-column
          prop="properName"
          label="人事姓名"
          width="180"
        />

        <el-table-column
          prop="department"
          label="部门"
          width="180"
        />

        <el-table-column
          prop="Number"
          label="人数"
        />

        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-button
              size="mini"
              class="details"
              type="#009688"
              @click="handleDetails(scope.$index, scope.row)"
            >导出</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getListJianli } from '@/api/table'
export default {
  name: 'Tdd',
  data() {
    return {
      value: '',
      options: '',
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      tableData: [{
        Number: '',
        department: '',
        properName: '',
        stopTime: '',
        order: 1,
        dates: ''

      }]
    }
  },
  created() {
    this.loadGetListJianli()
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    async loadGetListJianli() {
      const res = await getListJianli()
      console.log('res', res)
      this.tableData = res.data.data
    },
    drawChart() {
      const myChart = this.$echarts.init(document.getElementById('main'))
      myChart.resize({
        width: 1500,
        height: 400
      })
      const option = {

        tooltip: {
          trigger: 'axis'
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 250

        },
        series: [

          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [10, 22, 28, 23, 19, 10, 22, 28, 23, 20, 28, 35],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 10
              }
            }
          },

          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [10, 22, 28, 23, 30, 10, 22, 28, 23, 30, 35, 30],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 10
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style >
.tabless {
  margin-top: 30px;
  margin-left: 185px;
  margin-right: 190px;
  text-align: center;
}
.details {
  margin-left: -15px;
  background-color: transparent;
  border: none;
  color: blue;
  display: inline

}
.earches {
  margin-left: 130px;
  width: 900px;
}
.el-input--suffix .el-input__inner {
    padding-right: 46px;
}
.boss {
  margin-left: 60px;
  margin-top: 30px;
}
.date {
  margin-left: 20px;
  /* float: none; */
}
.date .zhi {
  width: 26px;
  height: 26px;
  background-color: #5b5b5b;
  /* float: left; */
  margin-left: 30px;
  margin-top: 10px;
  display: inline;
  /* position: absolute; */
}
.time {
  font-size: 16px;
}
.rod {
  color: #dcdddf;
  padding: 0 10px 0 10px;
}
  .handerBox {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f6f7f9;
    line-height: 60px;
    padding-left: 30px;
    font-size: 20px;
  }
</style>
